<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">

    <span style="font-size: 14px">订单号：</span>
    <el-input v-model="input" placeholder="输入订单编号" style="width: 200px"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="selectByOrderId" >查询</el-button>
    <br>
    <br>
    <el-button type="warning" icon="el-icon-circle-plus" @click="generation">生成激光码</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
    <br>
    <br>
    <el-table
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                :selectable="selectable"
                width="55">
        </el-table-column>
        <el-table-column
                label="订单编号"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易金额"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.money }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易时间"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属分类"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="数量"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span >{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="激光码"
                align="center"
                sortable
                width="120">
            <template slot-scope="scope">
                <span v-if="scope.row.lstatus==1" style="color: red">已生成</span>
                <span v-else style="color: red">未生成</span>
            </template>
        </el-table-column>
        <el-table-column
                label="操作"
                align="center"
                width="120">
            <template slot-scope="scope">
                <span v-if="scope.row.lstatus==1" style="color: red">
                         <el-button
                                 type="primary"
                                 @click="open"
                                 >分配打印
                         </el-button>
                </span>
                <span v-else style="color: red">
                    <el-button type="primary" disabled>打印</el-button>
                </span>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            background
            @current-change="currentChangeHandle"
            :current-page="current"
            :page-size="pageSize"
            :page-sizes="[10, 25, 50, 100]"
            @size-change="handleSizeChange"
            layout="prev, pager, next, sizes"
            :total="total">
    </el-pagination>

</div>

<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/elementui/index.js"></script>

<script>

    new Vue({
        el:"#app",
        data () {
            return {
                tableData:null,
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 10, //每页条数
                multipleSelection: [],
                input:'',
                delarr:[],
            }
        },

        methods: {
            loadPage(current, size) {
                this.current = current;
                // 查询订单
                axios.get("/laserAll?current=" + current + "&size=" + size).then(value => {
                    if (value.data.state == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },
            handleSizeChange(val) {
                this.pageSize=val
                this.loadPage(this.current,this.pageSize)
            },
            currentChangeHandle (val) {
                this.current=val
                this.loadPage(this.current,this.pageSize)
            },
            //选中哪些
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 根据订单号查找
            selectByOrderId(orderId){
                orderId = this.input;
                if (orderId != null){
                    axios.get("selectByOrderId?orderId="+orderId).then(value => {
                        if (value.data.state == 1) {
                            this.tableData = value.data.data;
                        }
                    })
                }
            },
            selectable(row){
                if (row.lstatus == 1){
                    return false;
                }
                return true;
            },
            // 批量删除
            batchDelete(arr){
                var lenth = this.multipleSelection.length;
                for(var i = 0; i<lenth;i++){
                    this.delarr.push(this.multipleSelection[i].id)
                    arr=this.delarr;
                }
                axios.delete("batchDelete?arr="+arr).then(value => {
                    if (value.data.state==1)
                    this.loadPage(1,this.pageSize);
                })
            },
            //生成激光码
            generation(arr){
                var lenth = this.multipleSelection.length;
                for(var i = 0; i<lenth;i++){
                    this.delarr.push(this.multipleSelection[i].orderId)
                    arr=this.delarr;
                }
                axios.put("generation?arr="+arr).then(value => {
                    if (value.data.state==1) {
                        this.loadPage(1, this.pageSize);
                    }
                })
            },
            open() {
                this.$alert('打印成功', {
                        confirmButtonText: '确定'})
            },
        },
            mounted() {
                this.loadPage(1, this.pageSize)
            }
        })

</script>
</body>
</html>